@import "../vars";

.xdh-cropper {
  display: inline-block;
  width: 150px;
  height: 150px;
  &__upload {
    display: block;
    width: 100%;
  }

  &-uploader {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: $--background-color-base;
    border: 1px dashed $--border-color-base;
    border-radius: $--border-radius-base;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    position: relative;

    i {
      font-size: 28px;
      color: $--color-info;
      width: 30px;
      height: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &__input, &__img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;

    }
    &__input {
      opacity: 0;
      font-size: 100px;
      z-index: 1;
      cursor: pointer;
    }
  }

  &-core{
    height: 100%;
    img {
      max-width: 100%;
    }
  }
}
